<template>
  <div class="app-container" v-loading="loading">
    <el-form :model="form" ref="formRef" :inline="true" :rules="rules" label-width="135px" disabled>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="工厂" prop="factoryName">
            {{ form.factoryName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工段" prop="workshopName">
            {{ form.workshopName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产线" prop="productLineName">
            {{ form.productLineName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工艺段" prop="sectionName">
            {{ form.sectionName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="生产日期" prop="prodDate">
            {{ form.prodDate }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班次" prop="scheduleName">
            {{ form.scheduleName }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开始生产时间" prop="startProdTime">
            {{ form.startProdTime }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束生产时间" prop="endProdTime">
            {{ form.endProdTime }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="生产订单" prop="workOrderList" style="width: 98%">
            <el-table :data="form.workOrderList" border style="width: 100%; margin-top: 10px">
              <el-table-column label="订单编号" prop="orderCode" width="140" />
              <el-table-column label="产品编号" prop="prodCode" />
              <el-table-column label="产品名称" prop="prodName" />
              <el-table-column label="计划产量" prop="planNumber" />
              <el-table-column label="已完工产量" prop="actualNumber" />
              <el-table-column label="完成率" prop="finishRate">
                <template #default="scope">
                  <span
                    :class="Number(scope.row.finishRate.replace('%', '')) > 100 ? 'green' : 'red'"
                  >
                    {{ scope.row.finishRate }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="单位" prop="unit" />
              <el-table-column label="计划开始时间" prop="planStartTime">
                <template #default="scope">
                  <span>{{ scope.row.planStartTime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="计划结束时间" prop="planEndTime">
                <template #default="scope">
                  <span>{{ scope.row.planEndTime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="工艺段" prop="sectionName" />
              <el-table-column label="来源" prop="source">
                <template #default="scope">
                  <dict-tag :options="order_source" :value="scope.row.source" />
                </template>
              </el-table-column>
              <el-table-column label="状态" prop="status">
                <template #default="scope">
                  <dict-tag :options="work_order_status" :value="scope.row.status" />
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="previousClasses">
      <div>上一班信息</div>
      <previousClassTable
        ref="previousClassTableRef"
        :datas="form"
        @handleClickPrevious="handleClickPrevious"
      ></previousClassTable>
    </div>
    <div class="previousClasses" v-if="parentType == 'productingView'">
      <div>
        <span>当班人员安排</span>
      </div>
      <onDutyPersonnel
        ref="onDutyPersonnelRef"
        v-model="prodChangeShiftsMemberList"
        v-if="prodChangeShiftsMemberList && prodChangeShiftsMemberList.length > 0"
        :parentType="'view'"
        :isShowProdHours="'no'"
      ></onDutyPersonnel>
    </div>

    <div class="previousClasses" v-if="parentType == 'productedView'">
      <el-tabs v-model="activeName">
        <el-tab-pane class="star" label="生产指标" name="first">
          <template #label>
            <span style="color: #f84224">*&nbsp;</span>
            生产指标
          </template>
          <productionIndicators
            ref="productionInRef"
            :datas="productionData"
          ></productionIndicators>
        </el-tab-pane>
        <el-tab-pane class="star" label="当班人员安排" name="second">
          <template #label>
            <span style="color: #f84224">*&nbsp;</span>
            当班人员安排
          </template>
          <onDutyPersonnel
            ref="onDutyPersonnelRef"
            v-model="prodChangeShiftsMemberList"
            v-if="prodChangeShiftsMemberList && prodChangeShiftsMemberList.length > 0"
            :parentType="'view'"
            :isShowProdHours="'yes'"
          ></onDutyPersonnel>
        </el-tab-pane>
        <el-tab-pane label="生产记录" name="third">
          <productionRecords
            v-if="activeName == 'third'"
            :workgroup="workgroupInfo"
          ></productionRecords>
        </el-tab-pane>
        <el-tab-pane label="设备运行情况" name="fourth">
          <!-- <equipmentOperation :datas="productionData"></equipmentOperation> -->
        </el-tab-pane>
        <el-tab-pane label="岗位交接日志" name="fifth">
          <!-- <workstationLog :datas="productionData"></workstationLog> -->
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup name="changeShifts">
import { getProdChangeShiftsDetail } from "@/api/productionMgt/changeShifts";
import { listShiftGroup } from "@/api/base/plan/shiftMgt/shiftGroup";
import { planGroupDetail } from "@/api/base/plan/shiftMgt/shiftGroup";
import productionIndicators from "./components/productionIndicators";
import onDutyPersonnel from "./components/onDutyPersonnel";
// import equipmentOperation from "./components/equipmentOperation";
// import workstationLog from "./components/workstationLog";
import productionRecords from "./components/productionRecords";
import previousClassTable from "./components/previousClassTable";
import { ref, reactive, useAttrs, getCurrentInstance, toRefs, onMounted } from "vue";
const attrs = useAttrs();
const { proxy } = getCurrentInstance();
const parentType = ref("add");
const workGroupOptions = ref([]);
const { work_order_status } = proxy.useDict("work_order_status");
const { order_source } = proxy.useDict("order_source");
const loading = ref(false);
const productionData = ref({});
const workgroupInfo = ref();
const activeName = ref("first");

const prodChangeShiftsMemberList = ref([]);
const emit = defineEmits(["close", "setTitle", "setActions", "setIsActionTop"]);
const actions = ref([
  {
    text: "取 消",
    theme: "",
    handle: () => {
      cancel();
    },
  },
]);

const data = reactive({
  form: {},
  rules: {},
});

const { form, rules } = toRefs(data);

function getDetail(id) {
  loading.value = true;
  getProdChangeShiftsDetail(id).then((res) => {
    console.log(res, "上一班数据");
    if (res?.data) {
      form.value = res.data;
      form.value.sectionCode = form.value.sectionCode.split(",");
      form.value.workOrderList = [res.data.prodOrderDto];

      // 上一班信息
      form.value.previousClassInfo = [res.data.previousClassInfo];
      // 生产指标
      productionData.value = res.data;
      workgroupInfo.value = res.data;
      productionData.value.parentType = "view";

      // 班组下拉列表
      getWorkGroupData();
      // 本班人员安排-1.先获取对应工艺段下面的班组；2.获取班组下面的本班人员
      getPlanGroupDetail();
      loading.value = false;
    } else {
      proxy.$modal.msgError("暂无上一班数据！");
      loading.value = false;
    }
  });
}

function getPlanGroupDetail() {
  planGroupDetail({ section: form.value.sectionCode.toString() }).then((res) => {
    handleProdChangeShiftsMemberList(res.data);
  });
}

function handleProdChangeShiftsMemberList(workGropList) {
  prodChangeShiftsMemberList.value[0] = {
    sectionCode: form.value.sectionCode,
    sectionName: form.value.sectionName,
    workGroupCode: form.value.workGroup,
  };
  prodChangeShiftsMemberList.value[0].planGroupList = [];
  prodChangeShiftsMemberList.value[0].planGroupMemberList = [];
  prodChangeShiftsMemberList.value[0].planGroupList = workGropList[0].planGroupList;
  prodChangeShiftsMemberList.value[0].planGroupList[0].planGroupMemberList = [
    ...form.value.prodChangeShiftsMemberList,
  ];
  prodChangeShiftsMemberList.value[0].planGroupMemberList = [
    ...form.value.prodChangeShiftsMemberList,
  ];
}

function getWorkGroupData() {
  listShiftGroup({ sectionCode: form.value.sectionCode.toString() }).then((res) => {
    workGroupOptions.value = res.rows;
  });
}

function cancel() {
  emit("close");
}

function handleClickPrevious(row) {
  getDetail(row.id);
}

onMounted(async () => {
  const { data } = attrs;
  parentType.value = data.parentType;
  if (data?.id) {
    getDetail(data.id);
  }
  actions.value = [
    {
      text: "取 消",
      theme: "",
      handle: () => {
        cancel();
      },
    },
  ];
  emit("setActions", actions.value);
});
</script>
<style lang="scss" scoped>
.star {
  .el-tabs__item::after {
    margin-left: 5px;
    color: red;
    content: "*";
  }
}

.green {
  color: green;
}

.red {
  color: red;
}

.previousClasses {
  margin-top: 20px;
}
</style>
